<template>
  <div class="container spread-container" :style="style">
    <div
      class="spread-user"
      v-if="member"
    >
      <van-image
        :src="member.avatar"
        width="54"
        height="54"
        fit="cover"
        round
      >
        <template v-slot:error>加载失败</template>
      </van-image>
      <div class="spread-user-content">{{member.realname}} 邀您参加</div>
    </div>
    <div class="spread-form">
      <van-cell-group>
        <van-field
          ref="mobile"
          v-model="mobile"
          required
          clearable
          maxlength="11"
          placeholder="输入手机号领取新人专属礼包"
          :error-message="errorMessage"
        />
      </van-cell-group>
      <div class="spread-action">
        <van-button
          size="large"
          block
          @click="onSubmit"
          :disabled="disableSubmit"
        >立即领取</van-button>
      </div>
    </div>
  </div>
</template>

<script>
import { openApp } from '../../common/util'
import {
  Row,
  Col,
  Cell,
  Button,
  CellGroup,
  Field,
  Area,
  Icon,
  Image,
  Popup,
  Picker,
  Lazyload
} from 'vant'

export default {
  components: {
    [Row.name]: Row,
    [Col.name]: Col,
    [Cell.name]: Cell,
    [Button.name]: Button,
    [CellGroup.name]: CellGroup,
    [Field.name]: Field,
    [Area.name]: Area,
    [Icon.name]: Icon,
    [Popup.name]: Popup,
    [Image.name]: Image,
    [Picker.name]: Picker,
    Lazyload
  },
  data () {
    return {
      member: null,
      disableSubmit: false,
      mobile: '',
      errorMessage: '',
      style: {
        backgroundImage: 'url(' + require('../../assets/images/bg/spreadbg.jpg') + ')'
      }
    }
  },

  created () {
    this.getMember()
  },
  computed: {
    userId () {
      return this.$route.params.id
    }
  },
  methods: {
    getMember () {
      this.axios
        .post(
          '/spread/member',
          {
            user_id: this.userId
          },
          { headers: { openAuth: true, FastMode: true } }
        )
        .then(response => {
          console.log(response.data)
          this.member = response.data
        })
        .catch(error => {
          this.disableSubmit = false
          this.$toast(error)
        })
    },
    onSubmit () {
      this.disableSubmit = true
      this.axios
        .post(
          '/spread/receive',
          {
            mobile: this.mobile,
            user_id: this.userId
          },
          { headers: { openAuth: true, FastMode: true } }
        )
        .then(response => {
          console.log(response.data)
          if (response.data) {
            this.$store.state.spread.receiveMobile = response.data.mobile
            this.$router.replace({ name: 'spread/success' })
          } else {
            this.disableSubmit = false
            this.onDownload()
          }
        })
        .catch(error => {
          this.disableSubmit = false
          this.$toast(error.data.message)
          this.onDownload()
        })
    },
    onDownload () {
      openApp(res => {
        this.$router.replace({
          name: 'download'
        })
      })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
.spread-container {
  background-repeat: no-repeat;
  background-position: top center;
  background-size: cover;
  background-color: #f35647;
  padding: 40vh 15px 0;
}
.spread-user {
  padding: 15px;
  display: flex;
  align-items: center;
  flex-direction: column;
  .van-image {
    border: 3px double rgba(255, 255, 255, 0.2);
  }
  &-content {
    margin-top: 10px;
    color: #fff;
    font-weight: 300;
  }
}
.spread-form {
  padding: 20px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 5px;
  .van-cell-group {
    background: transparent;
  }
  .van-field {
  }
  .van-cell--required::before {
    display: none;
  }
  .spread-action {
    margin-top: 15px;
  }
}
</style>
